<template>
  <div class="infrared">
    <el-card class="cardBox">
      <el-form
        ref="uploadFileFormRef"
        :model="uploadFileform"
        label-width="300px"
        label-position="left"
      >
        <el-form-item label="请选择巡检照片路径：" prop="parent_folder">
          <el-input v-model="uploadFileform.parent_folder" :disabled="true">
            <el-button
              slot="append"
              icon="el-icon-folder-opened"
              @click="openFolderSelectDialog(0)"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="请选择输出巡检缺陷照片路径：" prop="output_folder">
          <el-input v-model="uploadFileform.output_folder" :disabled="true">
            <el-button
              slot="append"
              icon="el-icon-folder-opened"
              @click="openFolderSelectDialog(1)"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="请选择输出巡检报告路径：" prop="report_folder">
          <el-input v-model="uploadFileform.report_folder" :disabled="true">
            <el-button
              slot="append"
              icon="el-icon-folder-opened"
              @click="openFolderSelectDialog(2)"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
            size="mini"
            :disabled="!hasFoldersToUpload"
            >开始处理</el-button
          >
          <el-button @click="resetForm('uploadFileFormRef')" size="mini">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <FolderSelectDialog
      :openVisible="folderSelectDialogVisible"
      @folder-selected="handleFolderSelected"
      @dialog-close="VisibleClose"
    ></FolderSelectDialog>
    <!-- 进度条对话框 -->
    <el-dialog
      title="处理进度"
      :visible.sync="progressDialogVisible"
      :close-on-click-modal="true"
      :show-close="true"
    >
      <template #content>
        <el-progress
          :percentage="progressData"
          :color="getProgressColor(progress)"
        ></el-progress>
        <div style="text-align: center; margin-top: 10px">{{ progressData }}%</div>
      </template>
      <template #footer>
        <el-button @click="progressDialogVisible = false" v-if="progressData === 100"
          >关闭</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script>
import FolderSelectDialog from "_c/file/dialog/moveFile/FolderSelectDialog.vue";
// 假设这是你的处理接口
import { progressDataApi, startDetection } from "_r/python.js";

export default {
  name: "Infrared",
  components: {
    FolderSelectDialog,
  },
  data() {
    return {
      // 表单数据，存储文件夹路径
      uploadFileform: {
        parent_folder: "", // 精细化巡视照片文件夹路径
        output_folder: "", // 精细化巡检缺陷文件夹路径
        report_folder: "", // 巡检报告文件夹路径
      },
      folderSelectDialogVisible: false,
      currentInputIndex: 0, // 当前选择的输入框索引
      progressDialogVisible: false,
      progressData: 0,
      taskId: "",
    };
  },
  computed: {
    // 判断是否所有文件夹都已选择
    hasFoldersToUpload() {
      return (
        this.uploadFileform.parent_folder &&
        this.uploadFileform.output_folder &&
        this.uploadFileform.report_folder
      );
    },
  },
  methods: {
    /**
     * 打开文件夹选择对话框
     * @param {number} index 输入框索引
     */
    openFolderSelectDialog(index) {
      this.currentInputIndex = index;
      this.folderSelectDialogVisible = true;
    },
    VisibleClose(data) {
      this.folderSelectDialogVisible = data;
    },
    /**
     * 处理文件夹选择事件
     * @param {string} path 选择的文件夹路径
     */
    handleFolderSelected(path) {
      switch (this.currentInputIndex) {
        case 0:
          this.uploadFileform.parent_folder = path;
          break;
        case 1:
          this.uploadFileform.output_folder = path;
          break;
        case 2:
          this.uploadFileform.report_folder = path;
          break;
        default:
          break;
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async onSubmit() {
      const res = await startDetection(this.uploadFileform);
      setTimeout(() => {
        this.progressDialogVisible = true;
        this.processData(res.task_id);
      }, 500);
      // 打开进度条对话框

      // 模拟接口调用
    },
    async processData(id) {
      const resProgress = await progressDataApi(id);
      console.log(resProgress, "resProgress");

      this.getProgressColor(resProgress.progress);
    },
    getProgressColor(params) {
      if (params < 30) {
        return "#909399";
      } else if (params < 70) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.infrared {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  // align-items: center;
}

.cardBox {
  width: 80%;
}
</style>
